<template>
    <div>
        <Table border height="400" :columns="columns" :data="articles"></Table>
        <Modal v-model="modal" title="提示">
            <p>网络出现错误</p>
        </Modal>
    </div>
</template>
<script>

import API from '../api'
import URL from '../urls'
export default {
    data() {
        return {
            modal: false,
            columns: [{
                title: '序号',
                key: 'row_num'
            }, {
                title: '文章id',
                key: 'id'
            }, {
                title: '标题',
                key: 'title'
            }, {
                title: 'praise',
                key: 'praise'
            }, {
                title: 'view',
                key: 'view'
            }, {
                title: 'typename',
                key: 'typename'
            }, {
                title: 'tags',
                key: 'tags',
                render: (h, params) => {
                    if (!params.row.tags) return h('p', '无标签')
                    var tags = params.row.tags
                    return h('div', tags.map((tag) => {
                        return h('Tag', {
                            props: {
                                color: 'green'
                            }
                        }, tag.cname)
                    }))
                }
            }, {
                title: '编辑',
                key: 'action',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {

                                type: 'primary',
                                size: 'small'
                            },
                            on:{
                                click:()=>{
                                    this.show(params.index)
                                }
                            }
                        },'查看详情'),
                        h('Button',{
                            props:{
                                type:'error',
                                size:'small'
                            },
                            on:{
                               click:()=>{
                                   this.remove(params)
                               } 
                            }
                        },'删除')
                    ])
                }
            }],
            articles: []
        }
    },
    methods: {
        getArticles() {

            API.request(URL.GETARTICLES, {}, (res) => {
                if (res) {
                    this.articles = res.Table2
                    console.log(res)
                } else {

                }
            })
        },
        show(index){
            this.$Modal.info(this.articles[index])
        },
        remove(index){
            this.articles.splice(index,1)
        }
    },
    created() {
        this.getArticles()
    }
}
</script>
